<template>
  <el-container>
    <el-header height="70px">
      <el-row type="flex" justify="space-between" align="middle">
        <div class="header-title">
          秀DD后台综合应用管理系统
        </div>
        <div class="userinfo">
          <img src="../assets/nv.jpg" width="50px" height="50px">
          <span>{{ username }}</span>
          <el-button @click="logout" type="danger" round size="mini">退出</el-button>
        </div>
      </el-row>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu
          default-active="/home"
          background-color="#0000"
          router
          text-color="#fff"
          active-text-color="skyblue">
          <el-menu-item index="/home">
            <i class="el-icon-s-home"></i>
            <span>首页</span>
          </el-menu-item>
          <el-submenu index="/sysuser">
            <template slot="title">
              <i class="el-icon-s-custom"></i>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/sysuser">
              <i class="el-icon-user-solid"></i>系统管理员
            </el-menu-item>
            <el-menu-item index="/appuser">
              <i class="el-icon-user"></i>App会员
            </el-menu-item>
            <el-menu-item index="/useradd">
              <i class="el-icon-shopping-cart-full"></i>收货地址
            </el-menu-item>
          </el-submenu>
          <el-submenu index="/shows">
            <template slot="title">
              <i class="el-icon-service"></i>
              <span>演出管理</span>
            </template>
            <el-menu-item index="/area">
              <i class="el-icon-map-location"></i>场地
            </el-menu-item>
            <el-menu-item index="/tags">
              <i class="el-icon-more"></i>风格
            </el-menu-item>
            <el-menu-item index="/shows">
              <i class="el-icon-mic"></i>演出
            </el-menu-item>
            <el-menu-item index="/music">
              <i class="el-icon-star-on"></i>音乐人
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
    <el-footer height="100px">
      底部内容
    </el-footer>
  </el-container>
</template>

<script>
export default {
  name: 'Index',
  data () {
    return {
      username: localStorage.username
    }
  },
  methods: {
    logout () {
      localStorage.clear()
      this.$http.defaults.headers.common.Authorization = ''
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped>
  .el-header{
    background: linear-gradient(-90deg, deepskyblue, gray);
  }
  .el-aside{
    background-color: dimgrey;
    height: 600px;
    text-align: left;
  }
  .el-footer{
    background: linear-gradient(-45deg, deepskyblue, white);
  }
  .el-header .el-row{
    height: 100%;
    width: 100%;
  }
  .userinfo{
    display: flex;
    flex-direction: row;
    justify-items: center;
    align-items: center;
  }
  .header-title{
    font-size: 1.5rem;
    font-family: "楷体";
    color: black;
  }
  .userinfo img{
    border-radius: 50%;
    box-shadow: 0 0 5px white;
  }
  .userinfo span{
    margin-left: 20px;
    margin-right: 20px;
    font-size: 1.2rem;
  }
  .el-menu-item{
    padding: 0;
    margin: 0;
  }
</style>
